<template>
  <div class="Content">
    <Head></Head>
    <div class="Main">
      <Label :label="label"></Label>
      <Post
        v-for="post in posts"
        v-bind:key="post.id"
        :post="post"
      ></Post>
    </div>
    <div class="Sidebar">
      <Introduction :introduction="introduction"></Introduction>
      <Tags v-if="tags" :tags="tags" @upDateRouter="upDateRouter"></Tags>
    </div>
  </div>
</template>

<script>
import Head from './components/head'
import Label from './components/label'
import Post from './components/homePost'
import Introduction from './components/introduction'
import Tags from './components/tags'
import Axios from 'axios'
export default {
  name: 'Tag',
  components: {
    Head,
    Label,
    Post,
    Introduction,
    Tags
  },
  data() {
    return {
      label: "",
      posts: [],
      tagId: "",
      introduction: {
        portraitImageUrl: '/imgs/2.jpg',
        licenseImageUrl: '/imgs/3.png'
      },
      tags: [],
    }
  },
  mounted() {
    //获取本标签页的标签id
    this.tagId = this.$route.query.id
    //请求本标签页的文章
    Axios
      .get("/tags/?id=" + this.tagId)
      .then(Response => (
        this.posts = Response.data,
        this.label = posts[0].label[0]))
      .catch(error => console.log(error))
    //获取右下角标签列表（有优化空间，可以检查是否有这个文件，减少请求）
    Axios
      .get("/tags/tags.json")
      .then(Response => (this.tags = Response.data))
      .catch(error => console.log(error))
  },
  methods: {
    upDateRouter: function (tag) {
      try {
        this.$router.push({path: "/tag/", query: {id: tag}})
      } catch (error) {
        console.log(error)
      }
      Axios
      .get("/tags/?id=" + tag)
      .then(Response => (
        this.posts = Response.data,
        this.label = Response.data[0].label[0]))
      .catch(error => console.log(error))
    }
  },
}
</script>

<style lang="stylus">
html,body{
  padding 0
  margin 0
  background #f3f3f3
  .Content{
    max-width 1200px
    margin 0 auto
    background #fff
    box-shadow: 0 0 15px 15px rgba(200,200,200,.14)
    overflow auto
    .Main{
      width 65%
      margin 0 0 100px 40px
      float left
    }
    .Sidebar{
      padding 40px 0 0 60px
      display flex
      justify-content center
      align-items center
      flex-direction column
    }
  }
}
</style>